import React, { Component } from 'react';
import { Layout, Menu, Row, Col, Input, Button } from 'antd';
import styles from './header.less';

const { Header } = Layout;
const { Search } = Input;

const headerCompoment = () => {
  return (
    <Header className={styles.headerWidth}>
      <div className={styles.headerContent}>
        <Row>
          <Col span={12}>
            <div className={styles.logo}>FREE MUSIC</div>
            <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
              <Menu.Item key="1">音乐厅</Menu.Item>
              <Menu.Item key="2">我的音乐</Menu.Item>
            </Menu>
          </Col>
          <Col span={12}>
            <div className={styles.rightContent}>
              <Search
                placeholder="音乐/视频/电台/用户"
                onSearch={value => console.log(value)}
                enterButton
                className={styles.search}
              />

              <Button type="link">登录</Button>

              <Button type="link">注册</Button>
            </div>
          </Col>
        </Row>
      </div>
    </Header>
  );
};

export default headerCompoment;
